import { Button, List ,Flex,SearchBar,WhiteSpace,WingBlank} from 'antd-mobile';
import React from 'react';
import { ListView ,Icon} from 'antd-mobile';

const data = [
  {
    title: 'potato',
    des: 'good',
  },
  {

    title: 'apple',
    des: 'ok',
  },
  {

    title: 'bnn',
    des: 'fine',
  },
];
const NUM_SECTIONS = 5;
const NUM_ROWS_PER_SECTION = 5;
let pageIndex = 0;

const dataBlobs = {};
let sectionIDs = [];
let rowIDs = [];
function genData(pIndex = 0) {
  for (let i = 0; i < NUM_SECTIONS; i++) {
    const ii = (pIndex * NUM_SECTIONS) + i;
    const sectionName = `Section ${ii}`;
    sectionIDs.push(sectionName);
    dataBlobs[sectionName] = sectionName;
    rowIDs[ii] = [];

    for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
      const rowName = `S${ii}, R${jj}`;
      rowIDs[ii].push(rowName);
      dataBlobs[rowName] = rowName;
    }
  }
  sectionIDs = [...sectionIDs];
  rowIDs = [...rowIDs];
}

export default class ProductList extends React.Component {
  constructor(props) {
    super(props);
    const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
    const getRowData = (dataBlob, sectionID, rowID) => dataBlob[sectionID][rowID];

    const dataSource = new ListView.DataSource({
      getRowData,
      getSectionHeaderData: getSectionData,
      rowHasChanged: (row1, row2) => row1 !== row2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    });

    this.state = {
      dataSource,
      isLoading: true,
    };
  }

  componentDidMount() {
    // you can scroll to the specified position
    // setTimeout(() => this.lv.scrollTo(0, 120), 800);

    // simulate initial Ajax
    setTimeout(() => {
      genData();
      this.setState({
        dataSource: this.state.dataSource.cloneWithRowsAndSections(data),
        isLoading: false,
      });
    }, 600);
   
  }

  // If you use redux, the data maybe at props, you need use `componentWillReceiveProps`
  // componentWillReceiveProps(nextProps) {
  //   if (nextProps.dataSource !== this.props.dataSource) {
  //     this.setState({
  //       dataSource: this.state.dataSource.cloneWithRowsAndSections(nextProps.dataSource),
  //     });
  //   }
  // }

  onEndReached = (event) => {
    // load new data
    // hasMore: from backend data, indicates whether it is the last page, here is false
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    console.log('reach end', event);
    this.setState({ isLoading: true });
    setTimeout(() => {
      genData(++pageIndex);
      this.setState({
        dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
        isLoading: false,
      });
    }, 1000);
  }

  render() {
    // console.log(this.state.dataSource)
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 8,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );
    let index = data.length - 1;
    const row = (rowData, sectionID, rowID) => {
      console.log(rowData)
      if (index < 0) {
        index = data.length - 1;
      }
      const obj = data[index--];
      return (
        <div key={rowID} style={{ width:"100%" }}>
          <div
            style={{
              lineHeight: '30px',
              color: '#888',
              fontSize: 18,
              borderBottom: '1px solid #F6F6F6',
              paddingLeft:'20px'
            }}
          >{obj.title}</div>
          <div style={{ display: 'flex' }}>
            <div style={{ lineHeight: 2 }}>
              <div style={{ marginBottom: '3px', fontWeight: 'bold' ,paddingLeft:'20px'}}>produce:{obj.des}</div>
              <div><span style={{  color: '#FF6E27' ,paddingLeft:'20px'}}> unit price:</span>¥ {rowID}</div>
            </div>
          </div>
        </div>
      );
    };

    return (
    <Flex align="start">
    <Flex.Item style={{flex:1}}>
    <List style={{float:'left',background:'white' ,position: 'fixed'}} >
        <List.Item >
          商品分类
          
        </List.Item>
        <List.Item style={{marginTop:'20px'}}>
          蔬菜
        </List.Item>
        <List.Item style={{marginTop:'20px'}}>
          肉类
        </List.Item>
        <List.Item style={{marginTop:'20px'}}>
          水果类
        </List.Item>
        <List.Item style={{marginTop:'20px'}}>
          粮油类
        </List.Item>
      </List>
      <hr style={{width:'1px',height:this.state.height,marginLeft:0,}}></hr>
      </Flex.Item>
      <Flex.Item>

      </Flex.Item>
      <Flex.Item style={{flex:6}}>
      <SearchBar placeholder="Search" maxLength={8} />
      <WhiteSpace />
      <ListView
      style={{float:'right',width:"100%",marginLeft:0,marginBottom:'30px'}}
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        useBodyScroll
        
        renderFooter={() => (<div style={{  textAlign: 'center' }}>
          {this.state.isLoading ? <Icon type="loading" /> : '加载完成'}
        </div>)}
        renderRow={row}
        renderSeparator={separator}
        pageSize={4}
        onScroll={() => { console.log('scroll'); }}
        scrollEventThrottle={200}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
      />
      </Flex.Item>
      </Flex>
    );
  }
}

